import { createHookConfig, DisposableCollection, NsGraph } from '@antv/xflow'
import type { Graph } from '@antv/x6'
import { POINT_NODE_KEY, NODE_KEY } from '../constants'
import { AlgoNode, PointNode } from '../node'

const graphConfig = {
  grid: true,
  connecting: {
    // router: { name: 'manhattan' },
    validateEdge: args => {
      const { edge } = args
      return !!(edge?.target as any)?.port
    },
    // 是否触发交互事件
    validateMagnet() {
      // 所有锚点均可触发
      return true
    },
    // 显示可用的链接桩
    validateConnection({ sourceView, targetView, targetMagnet }) {
      // 不允许连接到自己
      if (sourceView === targetView) {
        return false
      }
      const node = targetView!.cell as any
      // 判断目标链接桩是否可连接
      if (targetMagnet) {
        const portId = targetMagnet.getAttribute('port')
        const port = node.getPort(portId)
        return !(port && port.connected)
      }
      return
    },
  },
  // connecting: {
  //   // 是否触发交互事件
  //   validateMagnet({ magnet, cell }) {
  //     const inputPortInfo = cell
  //       .getData()
  //       .ports.filter(portItem => portItem.type === NsGraph.AnchorType.INPUT)

  //     if (inputPortInfo.length > 0) {
  //       return magnet.getAttribute('port-group') !== inputPortInfo[0].group
  //     }
  //     return false
  //   }
  // }
}

export const useGraphHookConfig = createHookConfig((config, proxy) => {
  // 获取 Props
  // const props = proxy.getValue()
  // console.log('get main props', props)
  config.setRegisterHook(hooks => {
    const disposableList = [
      // 注册增加 react Node Render
      hooks.reactNodeRender.registerHook({
        name: 'react node render',
        handler: async renderMap => {
          renderMap.set(NODE_KEY, AlgoNode)
          renderMap.set(POINT_NODE_KEY, PointNode)
        }
      }),
      hooks.graphOptions.registerHook({
        name: 'xflow-options',
        after: 'dag-extension-x6-options',
        handler: async args => {
          console.log(args)
          // Object.assign(args, graphConfig)
          args.connecting = { ...args.connecting, ...graphConfig.connecting }
        }
      })
    ]
    const toDispose = new DisposableCollection()
    toDispose.pushAll(disposableList)
    return toDispose
  })
})

// export const useGraphConfig = createGraphConfig(config => {
//   /** 设置XFlow画布配置项 */
//   config.setX6Config({
//     /** 画布网格 */
//     grid: {
//       visible: true,
//     },
//     /** 画布缩放等级 */
//     scaling: {
//       min: 0.2,
//       max: 3,
//     },
//     /** 画布滚轮缩放 */
//     // mousewheel: {
//     //   enabled: true,
//     //   /** 将鼠标位置作为中心缩放 */
//     //   zoomAtMousePosition: true,
//     // },
//   })

//   /** 设置XFlow画布需要渲染的React节点/边 */
//   config.setNodeRender(NODE_KEY, props => <AlgoNode {...props} />)
//   config.setNodeRender(POINT_NODE_KEY, props => <PointNode {...props} />)

//   // config.setNodeRender('NODE2', Node2)
//   // config.setEdgeRender('EDGE1', props => <Edge1 {...props} />)
//   // config.setEdgeRender('EDGE2', props => <Edge2 {...props} />)

// })
